<template>
	<view class="content">
		<!-- 头部搜索以及定位 -->
		<view class="topBox">
			<view class="" style="position: relative;">
				<view class="topBox_dw">
					<view class="topBox-left" @click="positionClick()">
						<image src="../../static/position.png" mode=""></image>
						<view class="dw" v-if="city" v-model="city">{{ city }}</view>
						<view class="dw" v-else>选择城市</view>
					</view>
					<view class="su" @click="work()">
						<input placeholder="搜索职位" placeholder-style="color:#B8B8B8;font-size:24rpx;" />
						<image src="../../static/search.png" mode=""></image>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="lbt">
					<swiper class="swiper" indicator-dots circular autoplay interval=2000>
						<swiper-item v-for="(item,index) in swipers" :key="index">
							<image :src="item.pic"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 310rpx;"></view>
		<!-- 选择 -->
		<view class="choice">
			<view class="yBox" @click="work()">
				<view class="yuan1">
					<image src="../../static/zgz.png" mode=""></image>
				</view>
				<text>找工作</text>
			</view>
			<view class="yBox" @click="zhaoRenc()">
				<view class="yuan2">
					<image src="../../static/zrc.png" mode=""></image>
				</view>
				<text>找人才</text>
			</view>
			<view class="yBox" @click="zhaoPin()">
				<view class="yuan3">
					<image src="../../static/xyuanzp.png" mode=""></image>
				</view>
				<text>校园招聘</text>
			</view>
			<view class="yBox">
				<view class="yuan4">
					<image src="../../static/xyzhip.png" mode=""></image>
				</view>
				<text>校友直聘-X</text>
			</view>
		</view>
		<!-- 新闻 -->
			<view class="xw" style="padding: 30rpx;box-sizing: border-box;">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #BBBBBB;padding: 30rpx 0;box-sizing: border-box;">
					<text style="font-size: 36rpx;font-weight: bold; margin-left: 6rpx;">院校新闻</text>
					<navigator url="../school/school_news" style="display: flex;align-items: center;">
						<text style="font-size: 26rpx; margin-right: 10rpx;">中山大学新闻-X</text>
						<image src="../../static/news_right.png" style="width: 32rpx; height: 32rpx;"></image>
					</navigator>
				</view>
			</view>
		<!-- 高校人才 -->
		<view class="gx">
			<view class="gxtitle">
				<text style="font-weight: bold; font-size: 28rpx;">高校人才</text>
				<view style="display: flex; align-items: center;" @click="switchTabSchool()">
					<text style="font-size: 24rpx; margin-right: 10rpx;">进入专题X</text>
					<image src="../../static/more_right.png" style="width: 26rpx; height: 26rpx;"></image>
				</view>
			</view>
			<view class="dxBox">
				<view class="dx" v-for="(item,index) in pic">
					<view>
						<image :src="item"></image>
					</view>
					<view style="margin-bottom: 25rpx; font-size: 24rpx; color: #505559;">
						<text>某某大学X</text>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0rpx 32rpx;">
			<view style="border: 2rpx solid #BBBBBB; margin-bottom: 36rpx;"></view>
		</view>
		<!-- 名企招聘 -->
		<view class="mq-zp">
			<view class="mq-tit">
				<text style="font-weight: bold;">名企招聘</text>
				<view style="display: flex; align-items: center;">
					<text style="font-size: 24rpx; margin-right: 10rpx;">更多X</text>
					<image src="../../static/more_right.png" style="width: 26rpx; height: 26rpx;"></image>
				</view>
			</view>
			<view class="mq-box">
				<view class="mq-item" v-for="item,i in list" :key="i">
					<image :src="item.logo" @click="mqDetail(item.id)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				city:'',
				swipers:[],
				pic:[
					'https://tse1-mm.cn.bing.net/th/id/R-C.250f95855aec49c974acb36b3ed32571?rik=BgcOI1PX1fb%2bww&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2f387b1a5181ebeddbec90fd5f19e606ce.jpg&ehk=Feb%2bz1leZKOVuTS20av3z7LKELRP0HH277cc6aSrAeI%3d&risl=&pid=ImgRaw&r=0',
					'https://tse1-mm.cn.bing.net/th/id/R-C.c6c03edea530e9caa677c9d17f193a4d?rik=MBgpsjumbTD5eQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fca186d97701674b996264b2d352894a7.jpg&ehk=HunG%2fPF7pUbpcS34cWpNvlS%2faoDPbcaTYL6LFFPQIIM%3d&risl=&pid=ImgRaw&r=0',
					'https://tse1-mm.cn.bing.net/th/id/R-C.15a1ba773a211acdeae39f83c2c13241?rik=h1wkOstFSHzvTg&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2ffdf948c82074494a74bf258eed4f855d.jpg&ehk=fYrgVtm0hD0sZn455mcVyf5k%2bQz7RScjHLMyUi6jG0A%3d&risl=&pid=ImgRaw&r=0','https://tse1-mm.cn.bing.net/th/id/R-C.250f95855aec49c974acb36b3ed32571?rik=BgcOI1PX1fb%2bww&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2f387b1a5181ebeddbec90fd5f19e606ce.jpg&ehk=Feb%2bz1leZKOVuTS20av3z7LKELRP0HH277cc6aSrAeI%3d&risl=&pid=ImgRaw&r=0',
					'https://tse1-mm.cn.bing.net/th/id/R-C.c6c03edea530e9caa677c9d17f193a4d?rik=MBgpsjumbTD5eQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fca186d97701674b996264b2d352894a7.jpg&ehk=HunG%2fPF7pUbpcS34cWpNvlS%2faoDPbcaTYL6LFFPQIIM%3d&risl=&pid=ImgRaw&r=0',
					'https://tse1-mm.cn.bing.net/th/id/R-C.15a1ba773a211acdeae39f83c2c13241?rik=h1wkOstFSHzvTg&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2ffdf948c82074494a74bf258eed4f855d.jpg&ehk=fYrgVtm0hD0sZn455mcVyf5k%2bQz7RScjHLMyUi6jG0A%3d&risl=&pid=ImgRaw&r=0'
				]
			}
		},
		onShow(){
		    uni.$on("updateCity", res => {
		        this.city = res.city
		        uni.$off('updateCity')// 清除监听
		    })
		},
		onLoad() {
			this.stateData()
			this.getLog()
			this.getSwipers()
			uni.getStorage({
				key:'setCity',
				success:(e)=>{
					this.city=e.data.cname
				}
			})
		},
		methods: {
			async stateData(){
				const res = await this.post('/Index/index/config')
				uni.setStorage({
				    key: 'stateData',
				    data: res.data,
				    success: () => {
				        console.log('success');
				    }
				});
			},
			async getLog(){
				const res = await this.get('/index/Index/get_all_company')
				this.list=res.data
			},
			async getSwipers(){
				const res = await this.get('/index/Index/get_banner')
				this.swipers= res.data
			},
			switchTabSchool(){
				uni.switchTab({
					url:'../school/school'
				})
			},
			mqDetail(id){
				uni.navigateTo({
					url:'../my/enterprise/companyDetails?id='+id+'&identity=0'
				})
			},
			work(){
				uni.navigateTo({
					url:'../my/enterprise/position?id=0'
				})
			},
			zhaoPin(){
				uni.navigateTo({
					url:'../index/school_recruit'
				})
			},
			zhaoRenc(){
				uni.navigateTo({
					url:'../index/get_talent'
				})
			},
			positionClick(){
				uni.navigateTo({
					url:'./position/position'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gx{
		padding: 0 30rpx;
		box-sizing: border-box;
		.gxtitle{
			color: #505559;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.dxBox{
			display: flex;
			flex-wrap:wrap;
			margin: 18rpx 0;
			align-items: center;
			justify-content: space-between;
			.dx{
				text-align: center;
				image{
					width: 224rpx; 
					height: 152rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.choice{
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 24rpx;
		color: #101010;
		.yBox{
			text-align: center;
			.yuan1,.yuan2,.yuan3,.yuan4{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-bottom: 10rpx;
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
			.yuan1{
				 background-image: linear-gradient(to right, #3EC4FC, #2ADFFE);
			}
			.yuan2{
				 background-image: linear-gradient(to right, #88F1C7, #8BE2D9);
			}
			.yuan3{
				 background-image: linear-gradient(to right, #54C8F1, #3887EE);
			}
			.yuan4{
				 background-image: linear-gradient(to right, #FF5329, #FF8D64);
			}
		}
	}
	
	.lbt {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: absolute;
		top: 115rpx;
		left: 0;
		.swiper {
			height: 320rpx;
		}
		image{
			width: 100%;
			height: 320rpx;
			border-radius: 10rpx;
			// background-color: #ff557f;
		}
	}
	.topBox {
		width: 100%;
		height: auto;
		.topBox_dw {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			background-color: #3291F8;
			padding: 10rpx 30rpx 80rpx 10rpx;
			.topBox-left{
				display: flex;
				image{
					width: 36rpx;
					height: 36rpx;
					margin-top: 3rpx;
				}
				.dw {
					width: 120rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					overflow:hidden;
					white-space: nowrap;
					text-overflow:ellipsis;
				}
			}
			.su {
				width: 70%;
				input {
					width: 100%;
					height: 52rpx;
					font-size: 26rpx;
					position: relative;
					border-radius: 40rpx;
					background-color: #FFFFFF;
					padding: 15rpx 10rpx 15rpx 52rpx;
				}
				image{
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					left: 185rpx;
					top: 37rpx;
				}
			}
		}
	}
	.mq-zp{
		padding: 0 36rpx;
		.mq-tit{
			display: flex;
			color: #505559;
			margin-bottom: 36rpx;
			align-items: center;
			justify-content: space-between;
		}
		.mq-box{
			display: flex;
			flex-wrap: wrap;
			margin-left: 10rpx;
			padding-bottom: 100rpx;
			justify-content: space-between;
			.mq-item{
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 15rpx;
					margin-bottom: 36rpx;
					border: 1rpx solid #C2C7CC;
				}
			}
		}
	}
</style>
